<template>
    <div class="mod-order" style="margin: 10px">
        <!--查询面板-->
        <SearchPanel ref="searchPanel" :search-config="searchConfig" @startSearch="startSearch">
            <!-- <el-form-item>
                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" size="mini" @click="batchDel" :disabled="selectDataList.length == 0">批量删除</el-button>
            </el-form-item> -->
        </SearchPanel>

        <!-- 查询结果 -->
        <ResultListPanel
            tableRef="table"
            ref="multipleTable"
            :checkBoxEnable="true"
            :data="dataList ? dataList : []"
            :listConfig="resultColConfig"
            :listLoading="listLoading"
            @actionClick="actionClick"
            @paginationChange="paginationChange"
            :tagTextExchange="tagTextExchange"
            @selectionChange="selectionChange"
        ></ResultListPanel>
    </div>
</template>

<script>
import { INDEX_SEARCH_CONFIG, INDEX_SEARCH_RESULT_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';


import { userType } from '../../utils/util';

export default {
    components: {
        ResultListPanel,
        SearchPanel
    },
    data() {
        return {
            selectDataList: [],
            // 搜索项配置
            searchConfig: INDEX_SEARCH_CONFIG,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            dataForm: {
                name: ''
            },
            type: 1
        };
    },

    mounted() {
        this.getList();
    },

    methods: {

        selectionChange(val) {
            this.selectDataList = val;
        },

        /***
         * 搜索面板触发 搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);

            this.getList();
        },

        //新增按钮  执行逻辑
        add() {
            this.$router.push({ path: '/baseInfoManger/AddOrUp', query: {type: 1 } });
        },

        // 批量删除
        batchDel(row) {
            console.log(this.selectDataList);
            var ids = [];
            this.selectDataList.forEach((item, index) => {
                return ids.push(item.id);
            });
            this.$alert('您确定要删除该数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    if (action !== 'cancel') {
                        API.baseInfoManger.baseInfoListDel(ids).then((res) => {
                            if (res.code == '0000') {
                                this.$message({
                                    type: 'success',
                                    message: `批量删除成功`
                                });
                                this.getList();
                            }
                        });
                    }
                }
            });
        },

        /***
         * 触发 列表 操作按钮 （ 编辑 和 删除 ）
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.Edit(data);
            } else if (item.alias === 'del') {
                this.sigleDel(data);
            }
        },

        // 编辑
        Edit(data) {

            this.$router.push({ path: '/baseInfoManger/AddOrUp', query: { itemData: data, type: 2 } });

        },

        // 单独删除
        sigleDel(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    if (action !== 'cancel') {
                        API.baseInfoManger.baseInfoListDel({ userId: row.userId }).then((res) => {
                            if (res.code == '0000') {
                                this.$message({
                                    type: 'success',
                                    message: `删除成功`
                                });
                                this.getList();
                            }
                        });
                    }
                }
            });
        },

        tagTextExchange([data, item]) {

            //用户类型
            if (item.alias == 'userType') {
                return userType(data.userType);
            }
        },

        /**
         * 分页器发生改变 触发事件
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },

        // 列表 接口
        getList() {
            let params = cloneDeep(this.dataForm);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            this.listLoading = true;

            API.baseInfoManger.baseInfoList(params).then((res) => {
                console.log(res);

                this.listLoading = false;
                this.totalPage = res.result.total;
                this.dataList = res.result.rows;
                
                this.$set(this.$refs.multipleTable['pageParams'], 'total', res.result.total);
            });
        }
    }
};
</script>

<style>
</style>